<template>
  <!-- 权限管理 -->
  <div>
    <el-row :gutter="20">
      <!--组织数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="organizeName"
            placeholder="请输入组织名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="organizeOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :default-checked-keys="tenantUserId"
            show-checkbox
            ref="treeRef"
            node-key="id"
            default-expand-all
            @check-change="handleCheckChange"
          />
        </div>
        <div>
          <el-button @click="preservation">保存</el-button>
        </div>
      </el-col>

      <el-col :span="20" :xs="24"> </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      // 组织名称
      organizeName: undefined,
      // 组织树选项
      organizeOptions: [
        {
          id: "99",
          name: "雪忆科技",
          parentId: "0",
          sort: 0,
          status: "0",
          subList: [
            {
              deptId: "99",
              id: "1",
              name: "超级管理员",
              sort: 0,
              status: "0",
            },
            {
              deptId: "100",
              id: "2",
              name: "超级管理员2",
              sort: 0,
              status: "0",
            },
          ],
        },
      ],
      defaultProps: {
        children: "subList",
        label: "name",
      },
      tenantUserId: []
    };
  },
  filters: {},
  computed: {},
  watch: {
    // 根据名称筛选部门树
    organizeName(val) {
      this.$refs.treeRef.filter(val);
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    /** 筛选节点 */
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleCheckChange(data, checked) {
      //获取所有选中的节点id
      // this.tenantUserId = this.$refs.treeRef.getCheckedKeys().concat(this.$refs.treeRef.getHalfCheckedKeys());
      // console.log(this.tenantUserId, "选中的节点(包括父节点)");
      this.tenantUserId = this.$refs.treeRef.getCheckedKeys()
      // console.log(this.$refs.treeRef.getCheckedKeys(), "选中的节点");
    },
    preservation() {
      console.log(this.tenantUserId)
    }
  },
};
</script>

<style scoped lang="scss"></style>
